<template>
	<view class="container">
		<view class="lsit">
			<view class="item">
				<view class="label">
					选择证件类型:
				</view>
				<picker class="input" @change="cardChange" :value="data.form.id_type" :range="data.cardlist" range-key="name">
						<view style="padding: 20rpx;background-color: white;">{{ data.cardlist[data.form.id_type].name }}</view>
				</picker>
			</view>
			<view class="item" >
				<view class="label">
					持卡人姓名:
				</view>
				<uni-easyinput class="input" v-model="data.form.payer_name" placeholder="请输入持卡人姓名" />
			</view>
			<view class="item" >
				<view class="label">
					证件号码:
				</view>
				<uni-easyinput class="input" v-model="data.form.id_no" placeholder="请输入证件号码" />
			</view>
			
			<view class="item" v-if="data.form.id_type!=0">
				<view class="label">
					选择银行卡类型:
				</view>
				<picker class="input" @change="bankChange" :value="data.bankstate" :range="data.banklist" range-key="name">
						<view style="padding: 20rpx;background-color: white;">{{ data.banklist[data.bankstate].name }}</view>
				</picker>
			</view>
			
			<view class="item" v-if="data.bankstate!=0">
				<view class="label">
					选择银行:
				</view>
				<picker class="input" @change="bankChanges" :value="data.bank" :range="data.bankstate==1?data.banklist1:data.banklist2" range-key="name">
						<view style="padding: 20rpx;background-color: white;">{{ data.bankstate==1?data.banklist1[data.bank].name:data.banklist2[data.bank].name }}</view>
				</picker>
			</view>
			<view class="item" v-if="data.bankstate!=0">
				<view class="label">
					银行卡号:
				</view>
				<uni-easyinput class="input" v-model="data.form.bank_card_no" placeholder="请输入银行卡号" />
			</view>
			<view class="item" v-if="data.bankstate==2">
				<view class="label">
					信用卡有效期:
				</view>
				<picker fields="month" mode="date" class="input" :value="data.form.expire_date"  @change="dataChange">
					<view>{{ data.form.expire_date||'请选择信用卡有效期' }}</view>
				</picker>
				<!-- <uni-easyinput class="input" v-model="data.form.expire_date" placeholder="请输入信用卡有效期" /> -->
			</view>
			<view class="item" v-if="data.bankstate==2">
				<view class="label">
					信用卡CVV:
				</view>
				<uni-easyinput class="input" v-model="data.form.cvv" placeholder="请输入信用卡CVV安全码" />
			</view>
			<view class=""  v-if="data.bankstate==2" style="font-size: 12px;color: #666;">
				提示：CVV安全码=信用卡背面3位数
			</view>
			<view class="item" v-if="data.bankstate!=0">
				<view class="label">
					开户手机号:
				</view>
				<view class="input" style="display: flex;align-items: center;font-size: 10px;">
					<uni-easyinput maxlength="11" class="input" v-model="data.form.mobile_no" placeholder="请输入开户手机号" />
					<view class="time" @click="data.time=='获取验证码'?paybank():''"  v-if="data.bankstate!=0">
						{{data.time}}
					</view>
				</view>
			</view>
			<view class="item"  v-if="data.bankstate!=0">
				<view class="label">
					验证码:
				</view>
				<uni-easyinput class="input" v-model="data.updata.sms_code" placeholder="请输入验证码" />
			</view>

		</view>
		
		<view class="btns" @click="submit()">
			添加
		</view>
		<!-- 输入框示例 -->
		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose"  mode="input" title="验证码" value=""
				placeholder="请输入验证码" @confirm="dialogInputConfirm"></uni-popup-dialog>
		</uni-popup>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow,onPullDownRefresh,onReachBottom} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	const data = reactive({
		time:'获取验证码',
		card:0,
		bankstate:0,
		bank:0,
		state:0,
		cardlist:[
			{name:'请选择证件类型'},
			{name:'身份证'},
			{name:'军官证'},
			{name:'士兵证'},
			{name:'护照'},
			{name:'港澳台居民往来通行证'},
			{name:'临时身份证'},
			{name:'户口本'},
			{name:'警官证'},
			{name:'外国人永久居留证'},
			{name:'其他'},
			{name:'外国护照'},
			{name:'营业执照'},
		],
		banklist:[
			{name:'请选择银行卡类型'},
			{name:'借记卡'},
			{name:'信用卡'},
		],
		banklist1:[
			{name:'请选择银行卡'},
			{name:'工商银行'},
			{name:'中信银行'},
			{name:'上海银行'},
			{name:'光大银行'},
			{name:'民生银行'},
			{name:'平安银行'},
			{name:'交通银行'},
			{name:'广发银行'},
			{name:'建设银行'},
			{name:'浦发银行'},
			{name:'邮储银行'},
			
		],
		banklist2:[
			{name:'请选择银行卡'},
			{name:'工商银行'},
			{name:'中国银行'},
			{name:'中信银行'},
			{name:'上海银行'},
			{name:'光大银行'},
			{name:'民生银行'},
			{name:'北京银行'},
			{name:'交通银行'},
			{name:'招商银行'},
			{name:'广发银行'},
			{name:'建设银行'},
			{name:'浦发银行'},
		],
		form:{
			id_type:0,
			id_no:'',
			payer_name:'',
			bank_card_no:'',
			mobile_no:'',
			expire_date:'',
			cvv:'',
		},
		updata:{
			sms_code:'',
			id:'',
			mch_order_no:''
		}
	})
	let inputDialog=ref()
	onLoad((option)=>{
		proxy.$request({
					url: `api/pay_bank/?page=1&size=50`,
					method: 'get',
					success(res) {

					}
				})
	})
	onShow(()=>{
	})
	onPullDownRefresh(()=> {
			setTimeout(function () {
				uni.stopPullDownRefresh();
			}, 1000);
		})
	onReachBottom(()=>{
		console.log('onReachBottom')
	})

	function cardChange(e){
		data.form.id_type=e.detail.value
	}
	function bankChange(e){
		data.bankstate=e.detail.value
	}
	function bankChanges(e){
		data.bank=e.detail.value
	}
	function dataChange(e){
		data.form.expire_date=e.detail.value.slice(2,e.detail.value.length).replace('-','/')
		console.log('dataChange',e.detail.value.slice(2,e.detail.value.length).replace('-','/'))
	}
	function submit() {
		if(data.form.id_type==0){
			uni.showToast({
				icon:'none',
				title:'请选择证件类型'
			})
			return
		}
		if(!data.form.payer_name){
			uni.showToast({
				icon:'none',
				title:'持卡人姓名不能为空'
			})
			return
		}
		if(!data.form.id_no){
			uni.showToast({
				icon:'none',
				title:'证件号码不能为空'
			})
			return
		}
		if(data.bankstate==0){
			uni.showToast({
				icon:'none',
				title:'请选择银行卡类型'
			})
			return
		}
		if(data.bank==0){
			uni.showToast({
				icon:'none',
				title:'请选择银行'
			})
			return
		}
		if(!data.form.bank_card_no){
			uni.showToast({
				icon:'none',
				title:'银行卡号不能为空'
			})
			return
		}
		if(data.bankstate==2&&!data.form.expire_date){
			uni.showToast({
				icon:'none',
				title:'请选择信用卡有效期'
			})
			return
		}
		if(data.bankstate==2&&!data.form.cvv){
			uni.showToast({
				icon:'none',
				title:'请填写信用卡cvv'
			})
			return
		}
		if(!(/^1[3456789]\d{9}$/).test(data.form.mobile_no)){
			uni.showToast({
				icon:'none',
				title:'银行卡绑定手机号格式有误'
			})
			return
		}
		if(!data.updata.sms_code){
			uni.showToast({
				icon:'none',
				title:'请填写验证码'
			})
			return
		}
		if(!data.updata.mch_order_no){
			uni.showToast({
				icon:'none',
				title:'请先获取验证码'
			})
			return
		}
		if(data.bankstate==1){
			data.updata.cvv=''
			data.updata.expire_date=''
		}
		uni.showLoading({
			title: '加载中'
		});
		proxy.$request({
			url: `api/bankBind/`,
			method: 'POST',
			data:data.updata,
			success(res) {
				uni.hideLoading();
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){
					setTimeout(()=>{
						uni.navigateBack()
					},1000)
				}
			}
		})

	}
	function paybank(){
		if(data.form.id_type==0){
			uni.showToast({
				icon:'none',
				title:'请选择证件类型'
			})
			return
		}
		if(!data.form.payer_name){
			uni.showToast({
				icon:'none',
				title:'持卡人姓名不能为空'
			})
			return
		}
		if(!data.form.id_no){
			uni.showToast({
				icon:'none',
				title:'证件号码不能为空'
			})
			return
		}
		if(data.bankstate==0){
			uni.showToast({
				icon:'none',
				title:'请选择银行卡类型'
			})
			return
		}
		if(data.bank==0){
			uni.showToast({
				icon:'none',
				title:'请选择银行'
			})
			return
		}
		if(!data.form.bank_card_no){
			uni.showToast({
				icon:'none',
				title:'银行卡号不能为空'
			})
			return
		}
		if(data.bankstate==2&&!data.form.expire_date){
			uni.showToast({
				icon:'none',
				title:'请选择信用卡有效期'
			})
			return
		}
		if(data.bankstate==2&&!data.form.cvv){
			uni.showToast({
				icon:'none',
				title:'请填写信用卡cvv'
			})
			return
		}
		if(!(/^1[3456789]\d{9}$/).test(data.form.mobile_no)){
			uni.showToast({
				icon:'none',
				title:'银行卡绑定手机号格式有误'
			})
			return
		}
		let datas=data.form
		datas.id_type=datas.id_type+''
		if(data.bankstate==1){
			datas.cvv=''
			datas.expire_date=''
		}
		proxy.$request({
			url: `api/pay_bank/`,
			method: 'POST',
			data:datas,
			success(res) {
				uni.showToast({
					icon:'none',
					title:res.errmsg
				})
				if(res.errno==0){
					data.updata.id=res.data.id
					data.updata.mch_order_no=res.data.mch_order_no
					let times=60
					let timer=setInterval(function(){
						if(times==0){
							data.time='获取验证码'
							clearInterval(timer)
						}else{
							times--
							data.time=times+'S重发'
						}
					},1000)
				}else{
					
				}
			}
		})
	}
</script>

<style lang="scss" scoped>
	.container{
		padding: 30upx;
		.lsit{
			background-color: #fff;
			padding: 20upx;
			border-radius: 20upx;
			.item{
				display: flex;
				align-items: center;
				font-size: 14px;
				margin: 20upx 0;
				.label{
					width: 35%;
				}
				.input{
					width: 65%;
				}
			}
			.items{
				font-size: 12px;
				color: #999;
			}
		}
		.btns{
			text-align: center;
			background-color: $color1;
			color: #fff;
			font-size: 16px;
			padding: 20upx;
			border-radius: 40upx;
			margin-top: 30upx;
		}
	}
	::v-deep .is-input-border{
		border-top: none;
		border-left: none;
		border-right: none;
		border-radius: 0;
	}
</style>
